<template>
  <div>
    <el-select
      class="searchMaterialSelect"
      v-model="material"
      filterable
      remote
      :placeholder="placeholder"
      :remote-method="search"
      :loading="loading"
      :popper-append-to-body="false"
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
        <div>{{$t('common.form.preview.materialReturn.tableLabel1')}}：{{ item.label }}</div>
        <div>{{$t('common.form.preview.materialReturn.colum1')}}：{{ item.materialSn || item.sn }}</div>
        <div>{{$t('common.form.preview.materialReturn.tableLabel4')}}：{{ item.materialProperty || item.property }}</div>
      </el-option>
    </el-select>
  </div>
</template>

<script>
import { getMaterialList, getInventoryList } from '@src/api/WareHouseApi';
import i18n from '@src/locales'

export default {
  name: 'search-material-select',
  props: {
    data: Object,
    placeholder: {
      type: String,
      default: i18n.t('common.placeholder.inputNameForSearch')
    },
    warehouseId: [String, Number], // 仓库id，查询物料库存用
    positionId: [String, Number] // 仓位id，查询物料库存用
  },
  inject: ['ifCheckStockNum'],
  data() {
    return {
      material: '',
      options: [],
      loading: false
    };
  },
  watch: {
    material(newValue) {
      if (newValue) {
        let item = this.options.find(v => v.value === newValue);
        newValue && this.$emit('change', item, ifClear => {
          ifClear && (this.material = '');
        });
      }
    }
  },
  methods: {
    search(keyword) {
      if (!keyword) return;
      
      const pms = {};
      let fn;
      
      if (!this.ifCheckStockNum) {
        fn = getMaterialList;
        pms.name = keyword;
      } else {
        // 物料需要判断库存的情况
        fn = getInventoryList;
        pms.warehouseId = this.warehouseId;
        pms.positionId = this.positionId;
        pms.availableSwitch = true;
        pms.materialName = keyword;
      }

      this.loading = true;
      
      fn(pms)
        .then(res => {
          
          if (!res.data || !res.data.list) return;

          let data = (res.data || {}).list || [];
          
          data.forEach(data => {
            let id = data.materialId || data.id;
            let name = data.materialName || data.name;
            if (this.ifCheckStockNum) {
              data.id = id;
              data.name = name;
            }
            data.value = id;
            data.label = name;
          });
          
          this.options = data;
          
        })
        .catch(e => console.error(e))
        .finally(() => {
          this.loading = false;
        });
    }
  }
};
</script>

<style lang="scss">
.material-item {
  h3 {
    font-size: 14px;
    margin: 0;
  }

  p {
    display: flex;
    margin: 0;

    span {
      label {
        display: inline-block;
        width: auto;
      }

      span {
        margin-right: 10px;
      }
    }
  }
}
::v-deep .el-input--small .el-input__inner {
  line-height: 0 !important;
}

</style>

<style lang="scss" scoped>
.searchMaterialSelect ::v-deep .el-select-dropdown__item {
  height: auto;
  padding: 5px 15px;
  margin: 0;
  & > div {
    line-height: 22px;
  }
}
</style>
